<script setup>
import Declaration from '../../components/Declaration.vue'
import RadioGroup from '../../components/RadioGroup.vue'
import GridTab from '../../components/GridTab.vue'
import {ref, reactive, computed, onMounted} from 'vue'
import {showToast} from 'vant';
// import {getTest} from '../../api/index'

// 排序
const useSort = () => {
  const map = new Map([
    ['asc', 'asc'],
    ['desc', 'desc'],
  ])
  const asc = map.get('asc');
  const desc = map.get('desc');
  const params = reactive({
    oneyear_grid: '', // 近1年网格收益[asc,desc]
    excess_earnings: '',// 超额收益[asc,desc]
  });

  const yearSortClass = computed(() => {
    return params.oneyear_grid === asc
        ? 'arrow-up'
        : params.oneyear_grid === desc ? "arrow-down" : ""
  })
  const earningsSortClass = computed(() => {
    return params.excess_earnings === asc
        ? 'arrow-up'
        : params.excess_earnings === desc ? "arrow-down" : ""
  })

  const _resetParams = (currentKey) => {
    for (let key in params) {
      if (currentKey !== key) {
        params[key] = '';
      }
    }
  }
  const sortClick = (key) => {
    _resetParams(key)
    const value = params[key];
    if (value === asc) {
      params[key] = desc
    }
    if (value === desc) {
      params[key] = ''
    }
    if (!value) {
      params[key] = asc
    }
  }

  return {
    params, sortClick, yearSortClass, earningsSortClass
  }
}

const {params, sortClick, yearSortClass, earningsSortClass} = useSort()

const onClickLeft = () => history.back();
const onlySeeSelf = ref(false)
const selectedOption = ref('0')
const onRadioChange = (value) => {
  console.log('Selected option changed to:', value);
  selectedOption.value = value
}
const onSelect = (item) => {
  console.log(item)
}

onMounted(() => {
  // getTest()
})
const useLoad = ()=>{
  /**
   * 上拉刷新和下拉加载更多hooks
   * @type {Ref<UnwrapRef<*[]>>}
   */
  const list = ref([]);
  const loading = ref(false);
  const finished = ref(false);
  const refreshing = ref(false);

  const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    setTimeout(() => {
      if (refreshing.value) {
        list.value = [];
        refreshing.value = false;
      }

      for (let i = 0; i < 10; i++) {
        list.value.push(list.value.length + 1);
      }
      console.log('loading'+Math.random())

      // 加载状态结束
      loading.value = false;

      // 数据全部加载完成
      if (list.value.length >= 40) {
        finished.value = true;
      }
    }, 1000);
  };
  const onRefresh = () => {
    // 清空列表数据
    finished.value = false;
    // 重新加载数据
    // 将 loading 设置为 true，表示处于加载状态
    loading.value = true;
    onLoad()
  };

  return {
    list,loading,finished,refreshing,onLoad,onRefresh
  }
}
const {list,loading,finished,refreshing,onLoad,onRefresh} = useLoad()


</script>

<template>
  <div class="scroll-container">
    <van-sticky>
      <div class="nav-wrap">
        <van-nav-bar
            title="网格回测排行"
            left-arrow @click-left="onClickLeft"
        >
          <template #left>
            <img src="@/assets/images/icon_btn_back_black@3x.png" width="16" height="16" alt="">
          </template>
        </van-nav-bar>
        <div class="record-wrap">
          <GridTab :tabs="[
              {name:'近1年周期',value:0},
              {name:'历史同价周期',value:1},
           ]" @select="onSelect"/>
        </div>
      </div>
    </van-sticky>
    <van-pull-refresh :disabled="true" v-model="refreshing" :head-height="80" @refresh="onRefresh">
      <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
      >
        <div v-if="!refreshing" class="filter-container">
          <!--    <div style="font-size:12px;">-->
          <!--      params：{{params}}-->
          <!--    </div>-->
          <!--  交易记录-->
          <div class="filter">
            <div class="filter-switch">
              <div class="switch">
                <span class="switch__label">仅看自选</span>
                <van-switch v-model="onlySeeSelf" active-color="rgba(247, 51, 45, 1)" inactive-color="#dcdee0"/>
              </div>
              <RadioGroup
                  :options="[
              { value: '0', label: '股票' },
              { value: '1', label: 'ETF' },
              { value: '2', label: '可转债' },
            ]"
                  :model="selectedOption"
                  @change="onRadioChange"
              ></RadioGroup>
            </div>
          </div>
          <div class="divide clearfix"></div>
          <div class="record">
            <div class="header">
              <div class="record__line n-b-border">
                <div class="title flex-start">
                  <div class="header-text">名称/代码</div>
                </div>
                <div class="count flex-end" @click="sortClick('oneyear_grid')">
                  <div class="header-text">近1年网格收益</div>
                  <div class="arrow" :class="yearSortClass"></div>
                </div>
                <div class="amount flex-end" @click="sortClick('excess_earnings')">
                  <div class="header-text">超额收益</div>
                  <div class="arrow" :class="earningsSortClass"></div>
                </div>
              </div>
            </div>
            <div class="tbody">
              <div class="record__line" v-for="(item,index) in list">
                <div class="title">
                  <h1 class="buyin">酒店餐饮</h1>
                  <div class="sub-text">SH699232</div>
                </div>
                <div class="count">
                  <div class="volume main-text">{{ index }}</div>
                </div>
                <div class="amount">
                  <div class="sum main-text">12.12%</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>

  <Declaration/>
</template>

<style lang="scss" scoped>
.scroll-container {
  min-height: calc(100vh - 220px);
  background: #fff;
  //border-radius: 0 0 16px 16px;
}

.filter-container {
  background: #f5f6fa;
  //min-height: 40vh;
  //min-height: 100vh;
  //border: 1px solid red;
  .flex-start {
    display: flex;
    justify-content: flex-start;
  }

  .flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.nav-wrap {
  background: #fff;

  .record-wrap {
    margin-top: 16px;
    //border:1px solid red;
    padding-bottom: 8px;
    background: #fff;
  }
}

.filter {
  overflow: hidden;
  background: #fff;

  .filter-switch {
    display: flex;
    justify-content: space-between;
    padding: 13px 16px 0;

    .switch {
      display: flex;
      align-items: center;

      .van-switch {
        font-size: 14px;
      }

      .switch__label {
        margin-right: 8px;
        height: 20px;
        text-align: center;
        color: rgba(108, 110, 122, 1);
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }

}

.divide {
  width: 100%;
  height: 16px;
  background: red;
  mix-blend-mode: normal;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 246, 250, 1) 100%);
}

.record {
  //margin-top: 12px;
  background: #fff;
  padding: 6px 16px;
  width: 100%;
  //min-height: 407px;
  //border-radius: 16px;
  border-radius: 16px 16px 0 0;
  background: rgba(255, 255, 255, 1);

  .record__line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f7f7f7;
    padding: 12px 0 12px 0;

    .arrow {
      //margin-left: 4px;

      //&.arrow-up .up {
      //  border-color: transparent transparent #FF322B transparent;
      //}
      //
      //&.arrow-down .down {
      //  border-color: #FF322B transparent transparent transparent;
      //}
      //
      //.up,
      //.down {
      //  width: 0;
      //  height: 0;
      //  border: 5px solid;
      //}
      //
      //.up {
      //  border-color: transparent transparent #A5A6AE transparent;
      //}
      //
      //.down {
      //  margin-top: 1px;
      //  border-color: #A5A6AE transparent transparent transparent;
      //}
    }

    &.n-b-border {
      border-bottom: 0;
    }

    > div {
      //border:1px solid red;
    }

    .header-text {
      height: 18px;
      text-align: right;
      color: rgba(165, 166, 173, 1);
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 13px;
      line-height: 18px;
    }

    .main-text {
      height: 21px;
      mix-blend-mode: normal;
      text-align: center;
      color: rgba(247, 51, 45, 1);
      font-family: DINPro-Medium;
      font-weight: 450;
      font-size: 16px;
      line-height: 21px;
    }

    .sub-text {
      height: 17px;
      mix-blend-mode: normal;
      color: rgba(108, 110, 122, 1);
      font-family: DINPro-Medium;
      font-weight: 450;
      font-size: 13px;
      line-height: 17px;
    }

    .title {
      flex: 1;

      h1 {
        height: 24px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 17px;
        line-height: 24px;
        color: rgb(29, 33, 50);
      }
    }

    .count {
      width: 30%;
      text-align: right;
    }

    .amount {
      width: 30%;
      display: flex;
      justify-content: flex-end;
    }
  }
}


</style>